<template>
  <div class="pages-wrap">
    <!-- 当前的分类页面 -->
    <scroll-view class="content" ref="scroll">
      <template>
        <div class="page">
          <app-header></app-header>


          <div class="item-hotel" v-for="item in hotelDetailData">
            <div class="left">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="right">
              <p class="first">{{ item.title }}</p>
              <p>
                <span>{{ city }}</span><span>*</span><span>{{ item.roomNum }}</span>居<span>{{ item.bedNum
                }}</span>床<span>6</span>人<span>123</span>平米
              </p>
              <p class="last"><span>{{ item.price }}</span></p>
            </div>
          </div>


          <div class="choosedate border">
            <h3>
              入离日期
              <span @click="show = true">
                修改日期<i @click="show = true" class="iconfont icon-xialajiantouxiao"></i>
              </span>
            </h3>

            <div class="choosed" title="选择日期区间" @click="show = true">
              <div class="choosed_first">
                <p>{{ startdate }}</p>
                <p>{{ startweek }}15:00后入住</p>
              </div>
              <div class="choosed_center">
                <span>共{{ datelength }}晚</span>
              </div>
              <div class="choosed_first">
                <p>{{ enddate }}</p>
                <p>{{ endweek }}12点前退房</p>
              </div>
            </div>

            <!-- 日期的弹框组件 -->
            <van-calendar class="van-calendar" v-model="show" type="range" @confirm="onConfirm" />

            <div class="chossedate_scond">
              <span>入住人数{{ peopleNum }}/6</span>
              <van-stepper v-model.number="peopleNum" min="1" max="6" />
            </div>

            <div class="chossedate_third">
              <van-field v-model="tel" type="tel" label="联系人电话" required :error="!teltest(tel)"
                :error-message="!teltest(tel) ? '手机号格式错误' : ''" />
              <van-field v-model="nike_name" type="nike_name" label="联系人姓名" required />
            </div>
          </div>
          <!-- 下列信息 -->
          <div class="post">
            <div class="top border">
              <div class="f1">
                <span> 免费赠送住宿意外险 </span>
                <span>
                  <van-switch :value="checked" size="20px" />
                </span>
              </div>
            </div>
            <div class="top2 border">
              <div class="f2">
                <span class="fa">发票 </span>
                <span class="wen"> 发票请联系房东（有疑问咨询客服） </span>
              </div>
            </div>
          </div>
          <!-- 创建订单页面 -->
          <div class="wen1">
            <h3>退订规则</h3>
            <p>
              取消订单。扣除全部房费作为违约金支付给房东，如提前离店，扣除全部剩余房费作为违约金支付给房东
            </p>
          </div>
          <div class="wen1">
            <h3>入住提示</h3>
            <p>
              房东确认后方可线上向房东索要入住须知，方便您安排入住；系统提供24小时客服服务，确保您入住无忧
            </p>
          </div>
          <div class="wen1">
            <h3>押金提示</h3>
            <p>
              在线支付押金200元，到店后无需支付，住房押金离店后，如无需扣款，将原方式退还
            </p>
          </div>
          <div class="pay">
            <div class="left">
              <span class="first">{{ total }}</span>
              <span class="last">含押金￥200(可退)</span>
            </div>
            <div class="right">
              <button @click="btnsubAction" class="btns">提交订单</button>
            </div>

          </div>



        </div>
      </template>
    </scroll-view>
    <!-- 支付金额页面 -->
    <transition enter-active-class="slideIn" leave-active-class="slideOut">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Popup } from 'vant';
import { Switch } from "vant";
import { Calendar, Stepper, Field } from "vant";
import { mapState } from "vuex";
export default {
  name: "createorder-page",
  components: {
    [Calendar.name]: Calendar,
    [Stepper.name]: Stepper,
    [Field.name]: Field,
    [Switch.name]: Switch,
  },
  data() {
    return {
      date: "",
      startdate: "请选择入住日期",
      enddate: "请选择退房日期",
      startweek: "",
      endweek: "",
      show: false,
      datelength: "0",
      week: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      hotelId: 0,
      checked: true,
      peopleNum: 1,
      tel: "",
      nike_name: "",
    };
  },
  created() {
    console.log(this.$route.params.id);
    this.hotelId = this.$route.params.id;
  },
  computed: {
    city() {
      return this.hotelDetailData[0].city.substring(0, 3);
    },
    ...mapState("hoteldetail", ["hotelDetailData"]),
    total() {
      return this.datelength == '0' ? 0 : this.hotelDetailData[0].price * this.peopleNum * this.datelength + 200
    }
  },

  methods: {
    // 创建订单在这个方法中写
    btnsubAction() {
      if (!this.tel || !this.nike_name || this.datelength == '0') {
        Toast("请完整填写入住时间、电话和姓名")
        return
      }
      // this.$store.commit("hotelOrder/setTotalPrice", {datelength:this.datelength ,peopleNum:this.peopleNum})
      this.$store.commit("hotelOrder/setTotalPrice", this.total)
      let list = {
        hotelId: this.hotelId,
        totalPrice:this.$store.state.hotelOrder.totalPrice,
        nike_name:this.nike_name,
        tel:this.tel,
        startdate: this.startdate, 
        enddate: this.enddate, 
        datelength: this.datelength, 
        orederstate:2,
        peopleNum:this.peopleNum,
        orderTime: Date.now(),
      }
        this.$store.dispatch("hotelOrder/createmyorder",list)
      this.$router.push({ name: "payment" });
      


     
    },
    // =====================================
    formatDate(date) {
      return `${date.getYear() + 1900}年${date.getMonth() + 1
        }月${date.getDate()}日`;
    },
    formatDay(date) {
      return this.week[date.getDay()];
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.startdate = this.formatDate(start);
      this.enddate = this.formatDate(end);
      this.startweek = this.formatDay(start);
      this.endweek = this.formatDay(end);
      this.datelength =
        (date[1].getTime() - date[0].getTime()) / (1000 * 3600 * 24);
    },
    teltest(tel) {
      return /^1\d{10}$/.test(tel);
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.pages-wrap {
  // position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 103;

  .van-button.van-calendar__confirm {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    border-radius: 2px;
    bottom: 212px !important;
    cursor: pointer;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    // -webkit-appearance: none;
  }


  .content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    // position: relative;

    ::v-deep .scroll-wrap {
      bottom: 0;
    }


    .page {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      background-color: #fff;
      padding-top: vw(60);
      display: flex;
      flex-direction: column;
      align-items: center;



      .app-header {
        background-color: #fff;

        ::v-deep .title {
          color: #f66;
        }

        ::v-deep .header-btn {
          color: #f66;
        }

        ::v-deep .iconfont {
          color: #f66;
        }
      }

      .item-hotel {
        height: vw(80);
        margin-top: vw(10);
        width: vw(337);
        border-radius: vw(8);
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.349019607843137);
        margin-bottom: vw(20);
        display: flex;

        .left {
          height: 100%;
          width: vw(100);
          margin-right: vw(40);

          img {
            width: 100px;
            height: 100%;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-size: vw(14);
          color: #333;

          .first {
            font-size: vw(14);
            color: #333;
          }

          .last {
            span {
              font-size: vw(18);
              color: #f93;
            }
          }
        }
      }

      .choosedate {
        width: vw(337);
        box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.349019607843137);


        h3 {
          padding: vw(10);
          padding-right: vw(25);
          font-size: vw(14);
          text-align: left;
          margin-bottom: vw(10);
          color: #333;
          font-weight: 700;
          display: flex;
          justify-content: space-between;

          span {
            font-size: vw(11);
            color: #999999;
            right: 0;
            font-weight: 500;
          }

          .iconfont {
            display: inline-block;
            font-size: vw(14);
            transform: rotate(270deg);
            // color: #fff;
          }
        }

        .choosed {
          width: vw(321);
          height: vw(90);
          background-color: #f66;
          margin: 0 auto;
          display: flex;
          border-radius: vw(10);
          margin-bottom: vw(20);

          .choosed_first {
            display: flex;
            flex-direction: column;
            min-width: vw(130);
            align-items: center;

            p {
              &:first-child {
                margin-top: vw(20);
                margin-bottom: vw(15);
                color: aliceblue;
              }

              &:nth-child(2) {
                color: #eee;
              }
            }
          }

          .choosed_center {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              padding: vw(5);
              background-color: #eee;
              border-radius: vw(4);
              color: rgb(236, 132, 132);
            }
          }
        }

        .chossedate_scond {
          width: vw(321);
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 auto;
          margin-bottom: vw(15);

          span {
            font-size: vw(16);
            color: #666;
          }
        }

        .chossedate_third {
          display: flex;
          flex-direction: column;
          padding-left: 1px;
          padding-bottom: 1px;
        }
      }

      .post {
        margin-top: vw(20);
        width: 100%;
        padding: 0 vw(20);
        height: vw(109);
        box-sizing: border-box;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;

        .top,
        .top2 {
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .f1 {
            display: flex;
            align-items: center;
            justify-content: space-between;

            >span {
              color: #999;
            }
          }
        }

        .top2 {
          border-top: none !important;
          margin-bottom: vw(20);
        }

        .top2 .f2 {
          display: flex;
          height: 100%;
          flex-direction: column;
          justify-content: space-evenly;

          span.fa {
            font-size: vw(14);
            color: #333;
            font-weight: bold;
          }

          .wen {
            color: #999;
          }
        }
      }

      .wen1 {
        padding-left: vw(20);
        color: #999;
        font-size: vw(12);
        margin-bottom: vw(20);
      }

      .pay {
        width: 100%;
        display: flex;
        padding: 0 vw(20);
        justify-content: space-between;

        .left {
          padding-left: vw(20);
          display: flex;
          flex-direction: column;

          .first {
            font-size: vw(26);
            color: #f93;
          }

          .last {
            color: #999;
          }
        }

        .right {
          width: vw(86);
          height: vw(36);
          padding-right: vw(20);
          box-sizing: border-box;
          // display: block;

          .btns {
            background: #3d81fd;
            width: 100%;
            outline: none;
            border: none;
            height: 100%;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
